<template>
	<view class="theChartsDiv">
		<!-- 排行榜组件 -->
		<scroll-view class="scroll-view_H" :scroll-x="true" scroll-left="120">
			<view class="scroll-viewaa">
				<view class="theChartsDivItem" v-for="(item,index) in list" :key="index"
					:style="index==0?'background-color:#e7f2f0':index==1?'background-color:#f1def1':'background-color:#d9e9d3'">
					<view class="theChartsDivItemTitle">
						<h2>{{item.type}}</h2>
						<span @click="goRanking(item.type)">查看更多→</span>
					</view>
					<view class="theChartsDivItemItem" v-for="(it,ind) in item.list" :key="ind">
						<view class="theChartsDivItemItemTop">
							{{it.top.toUpperCase()}}
						</view>
						<view class="theChartsDivItemItemTopI">
							<img :src="it.photo[0]" alt="" />
						</view>
						<view class="theChartsDivItemItemTopT">
							<view class="theChartsDivItemItemTopTtitle">
								{{it.title}}
							</view>
							<!-- <view class="">
								{{it.address}}
							</view> -->
							<view class="theChartsDivItemItemTopTadd">
								{{it.title}}
								<span v-if="it.distanceKm">| {{it.distanceKm}}km</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getListDetails
	} from '@/api/home.js'
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: "theCharts",
		data() {
			return {
				list: [],
				lon: null,
				lat: null,
			};
		},
		mounted() {
			this.isGetLocation()
		},
		methods: {
			...mapMutations(['lonLat']),
			goRanking(type) {
				if (type == '景区') {
					uni.navigateTo({
						url: `/pages/ranking/ranking?type=0`
					})
				} else if (type == '酒店') {
					uni.navigateTo({
						url: `/pages/ranking/ranking?type=1`
					})
				} else if (type == '美食') {
					uni.navigateTo({
						url: `/pages/ranking/ranking?type=2`
					})
				}
			},
			// 获取列表
			async getList() {
				let par = {
					lon: this.lon ? this.lon : null,
					lat: this.lat ? this.lat : null,
					judgement: '0'
				}
				let res = await getListDetails(par)
				if (res.code == 200) {
					this.list = res.data
				}
			},
			// 检验是否开启了定位服务
			isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
				let _this = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						} else {
							_this.getLocation();
						}
					},
					fail: (res) => {
						this.$emit('lonLat', null, null)
						this.lonLat([null, null])
						this.getList()
					}
				});
			},
			// 未授权弹出授权
			getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this = this;
				uni.authorize({
					scope: a,
					success(res) { //允许授权
						_this.getLocation();
					},
					fail: (res) => {
						wx.showModal({
							content: '检测到您没打开定位功能权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: "取消",
							success: function(res) {
								//点击“确认”时打开设置页面
								if (res.confirm) {
									wx.openSetting({
										success: (res) => {
											_this.getLocation()
										}
									})
								}
							},
						})
					}
				})
			},
			//获取当前所在位置的经纬度
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.$emit('lonLat', res.longitude, res.latitude)
						this.lonLat([res.longitude, res.latitude])
						this.lat = res.latitude
						this.lon = res.longitude
						this.getList()
					},
					fail: (res) => {
						this.getList()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.theChartsDiv {
		width: 100%;
		margin-top: 20rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 100%;

			.scroll-viewaa {
				width: 100%;
				display: flex;
			}

			.theChartsDivItem {
				display: flex;
				flex-direction: column;
				min-width: 80%;
				max-width: 80%;
				min-height: 300rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				padding: 10rpx 20rpx;

				.theChartsDivItemItem {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					gap: 15rpx;

					.theChartsDivItemItemTopT {
						width: 58%;
						height: 100rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;


						.theChartsDivItemItemTopTadd {
							width: 100%;
							font-size: 22rpx;
							color: #666666;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.theChartsDivItemItemTopTtitle {
							width: 100%;
							font-size: 30rpx;
							font-weight: bold;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.theChartsDivItemItemTopI {
						img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 10rpx;
						}
					}

					.theChartsDivItemItemTop {
						font-weight: bold;
					}
				}

				.theChartsDivItemTitle {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					h2 {
						font-size: 40rpx;
						font-weight: bold;
					}

					span {
						font-size: 24rpx;
					}
				}
			}
		}

	}
</style>